Issue #273: add ThemeToggle component and update theme#588
Conversation
✅ Deploy Preview for accessiblecommunity ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| <slot /> | ||
|
|
||
| <style lang="scss"> | ||
| <style is:global lang="scss"> |
There was a problem hiding this comment.
Note to reviewer: Without this, the nav bar in the top header was not styled correctly and the menu items were not visible.
There was a problem hiding this comment.
I'm surprised this is required.
Does this cause a repeat of some of the Bootstrap SCSS to be duplicated in the output? If so, perhaps we just put that in the header once so it doesn't get duplicated?
| @charset "UTF-8"; | ||
|
|
||
| $color-mode-type: media-query; | ||
| $color-mode-type: data-attribute; |
There was a problem hiding this comment.
Note to reviewer: See Bootstrap docs - Building with SASS for description
There was a problem hiding this comment.
Good catch on this.
| @@ -1,4 +1,4 @@ | |||
| // To be included in components and pages that need additional dark mode rules. | |||
| $color-mode-type: media-query; | |||
| $color-mode-type: data-attribute; | |||
There was a problem hiding this comment.
Note to reviewer: See Bootstrap docs - Building with SASS for description
lsr-explore
force-pushed
the
lsr-explore/gh-273/light-dark-toggle
branch
from
da414ae to
9a08b03
Compare
brian-montgomery
left a comment
brian-montgomery
left a comment
There was a problem hiding this comment.
Looks good and works well. You've picked up bootstrap quickly.
Let me run this by UX and/or Rachael to see if they want the control at a different location.
| <slot /> | ||
|
|
||
| <style lang="scss"> | ||
| <style is:global lang="scss"> |
There was a problem hiding this comment.
I'm surprised this is required.
Does this cause a repeat of some of the Bootstrap SCSS to be duplicated in the output? If so, perhaps we just put that in the header once so it doesn't get duplicated?
| @charset "UTF-8"; | ||
|
|
||
| $color-mode-type: media-query; | ||
| $color-mode-type: data-attribute; |
There was a problem hiding this comment.
Good catch on this.
| <html lang="en"> | ||
| <head> | ||
| <script is:inline> | ||
| // Set data-bs-theme before paint to avoid a flash of the wrong theme. |
There was a problem hiding this comment.
Well aware of this problem... awesome that you found a way around that.
|
@rachaelbradley had stated she would like it either in the footer or on an accessibility settings page of some type. However, after talking with her, neither one of us are sure it works there. Can you try a version which is to the right of the donate button (instead of the left) and is just the icons (no text)? We'll run this by UX and get their thoughts. |
2 participants
Add ThemeToggle component and update theme
Fixes
Note
See issue for open questions